<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公司名称:">
          <el-input
            v-model="formInline.company_name"
            placeholder="请输入公司名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家类型">
          <!-- <el-select
            v-model="formInline.seller_type"
            placeholder="请选择商家类型"
          >
            <el-option label="主材" value="1"></el-option>
            <el-option label="辅材" value="2"></el-option>
          </el-select> -->
          <el-cascader
            :value="form.seller_type"
            :props="{
              value: 'id',
              label: 'name',
              checkStrictly: true,
              emitPath: false,
            }"
            :options="shopTypeOption"
            v-model="formInline.seller_type"
          >
            <!-- <template slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                </template> -->
          </el-cascader>
        </el-form-item>
        <el-form-item label="负责人:">
          <el-input
            v-model="formInline.store_manager_name"
            placeholder="请输入负责人"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人电话:">
          <el-input
            v-model="formInline.store_manager_phone"
            placeholder="请输入负责人电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="商家状态">
          <el-select v-model="formInline.is_lock" placeholder="请选择商家状态">
            <!-- <el-option label="终止" value="1"></el-option>
            <el-option label="合作中" value="0"></el-option> -->
            <el-option label="启用" value="1"></el-option>
            <el-option label="停用" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="gauge">
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="onReset">重置</el-button>
        <el-button type="primary" @click="newly">新增商家</el-button>
      </div>
    </div>
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        max-height="600"
      >
        <el-table-column
          type="index"
          align="center"
          label="序号"
          :index="indexMethod"
          width="70"
        >
        </el-table-column>
        <!-- <el-table-column
          align="center"
          label="商家ID"
          width="70"
          prop="seller_id"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.account_by_seller.seller_id }}</span>
          </template>
        </el-table-column> -->

        <el-table-column
          prop="logo"
          align="center"
          label="商家信息"
          width="300"
        >
          <template slot-scope="scope">
            <div class="modality">
              <el-image
                style="width: 70px; height: 70px; width: 20%"
                :src="scope.row.logo"
                class="leftImg"
              ></el-image>
              <div class="modalityUser">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.company_name"
                  placement="top-start"
                >
                  <span class="text"
                    >公司名称:{{ scope.row.company_name }}</span
                  >
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.shop_name"
                  placement="top-start"
                >
                  <span class="text">店铺名称:{{ scope.row.shop_name }}</span>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.seller_type_name"
                  placement="top-start"
                >
                  <span class="text"
                    >商家类型:{{ scope.row.seller_type_name }}</span
                  >
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="account_by_seller.telephone"
          align="center"
          label="账户手机号"
        >
        </el-table-column>
        <el-table-column
          prop="cooperation_expiration_date"
          align="center"
          label="到期时间"
        >
        </el-table-column>
        <el-table-column
          prop="store_manager_name"
          align="center"
          label="负责人"
        >
        </el-table-column>
        <el-table-column
          prop="store_manager_phone"
          align="center"
          label="负责人电话"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="seller_type_name"
          align="center"
          label="商家类型"
        >
        </el-table-column> -->
        <el-table-column prop="is_lock_text" align="center" label="商家状态">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button
                v-if="scope.row.account_by_seller.status == 0"
                size="mini"
                type="success"
                @click="consent(scope.row)"
                >启用</el-button
              >
              <el-button
                v-else
                size="mini"
                type="danger"
                @click="consent(scope.row)"
                >停用</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="warning"
                @click="handleEdit1(scope.row)"
                >编辑</el-button
              >
              <!-- <el-button
                size="mini"
                type="primary"
                @click="subbranch(scope.row)"
                >分店管理</el-button
              > -->
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- //分页器 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 200, 300, 400]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      class="aboutDialog"
      @opened="handopen"
    >
      <el-dialog
        width="50%"
        title="选择商家所在位置"
        :visible.sync="innerVisible"
        append-to-body
        @opened="addrSearch"
      >
        <div style="margin-bottom: 10px" v-if="actForm.formatted_addresses">
          {{ actForm.formatted_addresses.recommend }}
        </div>
        <div>
          <div class="left">
            <div class="inputBox" style="display: flex; margin-bottom: 10px">
              <el-input
                v-model="input"
                placeholder="请输入位置关键字"
                @focus="focusadd"
                @input="search"
                @blur="inputblur"
              ></el-input>
              <el-button type="primary" @click="search">搜索</el-button>
            </div>
            <div class="adressBox" v-if="adressList.length && isShow">
              <div
                v-for="(item, index) in adressList"
                :key="index"
                @mousedown="chooseAdress(item, index)"
                class="address-item"
              >
                <span
                  class="el-icon-location"
                  style="font-size: 16px; color: #409eff; margin-right: 10px"
                >
                </span>
                <span :class="[item.isChoose === true ? 'checked' : '']">{{
                  item.title
                }}</span>
              </div>
            </div>
          </div>
          <div id="mapEl"></div>
          <div style="width: 100%; display: flex; justify-content: flex-end">
            <el-button style="margin: 10px" @click="confirm">确定</el-button>
          </div>
        </div>
      </el-dialog>
      <span>
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <div class="margBott">基本信息</div>
          <div class="divFlex">
            <el-form-item
              label="公司名称"
              class="InputWith"
              prop="company_name"
            >
              <el-input
                v-model="form.company_name"
                placeholder="请输入公司名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司LOGO" class="InputWith">
              <el-upload
                class="upload-demo"
                action
                :http-request="uploadFiles"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <el-image
                  v-if="form.logo"
                  class="imageGood"
                  :src="form.logo"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item
              label="账户手机号"
              class="InputWith"
              prop="account_by_seller.telephone"
            >
              <el-input
                @input="changeMessage($event)"
                v-model="form.account_by_seller.telephone"
                placeholder="请输入账户手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="账户密码" class="InputWith">
              <el-input
                @input="changeMessage($event)"
                type="password"
                v-model="form.account_by_seller.password"
                placeholder="请输入账户密码"
              ></el-input>
            </el-form-item>
          </div>
          <div class="divFlex">
            <!-- <el-form-item label="可创建分店数量" class="InputWith">
              <div class="divFlex">
                <el-input v-model="form.shop_num"></el-input>
                <span class="InputWith">个</span>
              </div>
            </el-form-item> -->
            <el-form-item label="商家类型" class="InputWith">
              <!--  checkStrictly: true,
                  emitPath: false,  -->
              <el-cascader
                :popper-class="'first-no-check-cascader'"
                :value="form.seller_type"
                :props="{
                  value: 'id',
                  label: 'name',
                  multiple: true,
                  checkStrictly: true,
                }"
                :options="shopTypeOption"
                v-model="selectedOptions"
                collapse-tags
                @change="shopTypehandleChange"
              >
                <!-- <template slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                </template> -->
              </el-cascader>
            </el-form-item>
            <el-form-item label="店铺地点" class="InputWith">
              <el-button @click="handleAddr">选择店铺地点</el-button>
            </el-form-item>
          </div>
          <div class="within" v-for="(item, index) in options1" :key="index">
            <el-form-item :label="item.title" collapse-tags prop="category_ids">
              <el-cascader
                v-if="selectList[0]"
                v-model="selectList[index].cate_id"
                :options="item.data"
                :props="{ label: 'name', value: 'id' }"
                clearable
                collapse-tags
                class="wiIndex"
                @change="selectChange"
              ></el-cascader>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item label="分成比例" class="InputWith" prop="divide">
              <div class="divFlex">
                <el-input
                  v-model="form.divide"
                  placeholder="请输入分成比例"
                ></el-input>
                <span class="InputWith">%</span>
              </div>
            </el-form-item>
            <el-form-item
              label="合作到期日期"
              class="InputWith"
              prop="cooperation_expiration_date"
            >
              <el-date-picker
                v-model="form.cooperation_expiration_date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item label="角色" prop="role_id">
              <el-select v-model="form.role_id" placeholder="请选择">
                <el-option
                  v-for="item in optionsRole"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="margBott">营业执照信息</div>
          <div class="divFlex">
            <el-form-item
              label="营业执照注册号"
              class="InputWith"
              prop="paper_no"
            >
              <el-input
                v-model="form.paper_no"
                placeholder="请输入营业执照注册号"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="法定代表人"
              class="InputWith"
              prop="legal_person"
            >
              <el-input
                v-model="form.legal_person"
                placeholder="请输入法定代表人"
              ></el-input>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item
              label="法人证件类型"
              class="InputWith"
              prop="legal_person_no_type"
            >
              <el-select
                v-model="form.legal_person_no_type"
                placeholder="请选择法人证件类型"
                style="width: 100%"
              >
                <el-option label="居民身份证" value="居民身份证"></el-option>
                <el-option label="护照" value="护照"></el-option>
                <el-option
                  label="港澳居民居住证"
                  value="港澳居民居住证"
                ></el-option>
                <el-option
                  label="台湾居民居住证"
                  value="台湾居民居住证"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="证件号码"
              class="InputWith"
              prop="legal_person_no"
            >
              <el-input
                v-model="form.legal_person_no"
                placeholder="请输入证件号码"
              ></el-input>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item label="成立时间" class="InputWith" prop="set_up">
              <el-date-picker
                v-model="form.set_up"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="注册地址"
              class="InputWith"
              prop="registered_address"
            >
              <el-input
                v-model="form.registered_address"
                placeholder="请输入注册地址"
              ></el-input>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item
              label="注册资本"
              class="InputWith"
              prop="registered_capital"
            >
              <div class="divFlex">
                <el-input
                  v-model="form.registered_capital"
                  placeholder="请输入注册资本"
                ></el-input
                ><span class="InputWith">元</span>
              </div>
            </el-form-item>
            <el-form-item
              label="注册资本币"
              class="InputWith"
              prop="registered_capital_currency"
            >
              <el-select
                v-model="form.registered_capital_currency"
                placeholder="请选择注册资本币"
                size="medium"
              >
                <el-option label="人民币" value="人民币"></el-option>
                <el-option label="美元" value="美元"></el-option>
                <el-option label="日元" value="日元"></el-option>
                <el-option label="英镑" value="英镑"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="divFlex">
            <el-form-item label="营业期限" class="InputWith" prop="datumGens">
              <el-date-picker
                v-model="form.datumGens"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                @change="initiation"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="登记机关"
              class="InputWith"
              prop="hierarchical_organ"
            >
              <el-input
                v-model="form.hierarchical_organ"
                placeholder="请输入登记机关"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="等级机关" class="InputWith">
              <el-input v-model="form.hierarchical_organ" placeholder="请输入等级机关"></el-input>
            </el-form-item> -->
          </div>

          <el-form-item label="经营范围" prop="business_scope">
            <el-input
              type="textarea"
              autosize
              placeholder="请输入经营范围"
              v-model="form.business_scope"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="营业执照" class="InputWith">
            <el-upload
              class="upload-demo"
              action
              :http-request="license"
              ref="upload"
              :limit="fileLimit"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload"
              :show-file-list="false"
              :headers="headers"
            >
              <el-image
                v-if="form.paper_img"
                class="imageGood"
                :src="form.paper_img"
                style="width: 360px; height: 180px"
              ></el-image>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过5M
              </div>
            </el-upload>
          </el-form-item>
          <el-form-item label="法人代表身份证">
            <div class="divFlex">
              <el-upload
                class="upload-demo"
                action
                :http-request="front"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <el-image
                  v-if="form.legal_person_img"
                  class="imageGood"
                  :src="form.legal_person_img"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
              <el-upload
                class="upload-demo"
                action
                :http-request="reverse"
                ref="upload"
                :limit="fileLimit"
                :on-remove="handleRemove"
                :file-list="fileList"
                :on-exceed="handleExceed"
                :before-upload="beforeUpload"
                :show-file-list="false"
                :headers="headers"
              >
                <el-image
                  v-if="form.legal_person_img2"
                  class="imageGood"
                  :src="form.legal_person_img2"
                  style="width: 360px; height: 180px"
                ></el-image>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过5M
                </div>
              </el-upload>
            </div>
          </el-form-item>
          <div>
            <div class="margBott">联系信息</div>
            <div>
              <span class="text">公司负责人</span>
              <div class="divFlex">
                <el-form-item
                  label="姓名"
                  class="InputWith"
                  prop="charge_person_name"
                >
                  <el-input
                    v-model="form.charge_person_name"
                    placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="电话"
                  class="InputWith"
                  prop="charge_person_phone"
                >
                  <el-input
                    v-model="form.charge_person_phone"
                    placeholder="请输入电话"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="divFlex">
                <el-form-item
                  label="邮箱"
                  class="InputWith"
                  prop="charge_person_email"
                >
                  <el-input
                    v-model="form.charge_person_email"
                    placeholder="请输入邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="微信"
                  class="InputWith"
                  prop="charge_person_wechat"
                >
                  <el-input
                    v-model="form.charge_person_wechat"
                    placeholder="请输入微信"
                  ></el-input>
                </el-form-item>
              </div>
              <span class="text">店铺信息</span>
              <div class="divFlex">
                <el-form-item
                  label="店铺名称"
                  class="InputWith"
                  prop="shop_name"
                >
                  <el-input
                    v-model="form.shop_name"
                    placeholder="请输入店铺名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="店铺电话"
                  class="InputWith"
                  prop="shop_phone"
                >
                  <el-input
                    v-model="form.shop_phone"
                    placeholder="请输入店铺电话"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="divFlex">
                <el-form-item
                  label="店铺负责人"
                  class="InputWith"
                  prop="store_manager_name"
                >
                  <el-input
                    v-model="form.store_manager_name"
                    placeholder="请输入店铺负责人"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="负责人电话"
                  class="InputWith"
                  prop="store_manager_phone"
                >
                  <el-input
                    v-model="form.store_manager_phone"
                    placeholder="请输入负责人电话"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="divFlex">
                <el-form-item
                  label="邮箱"
                  class="InputWith"
                  prop="store_manager_email"
                >
                  <el-input
                    v-model="form.store_manager_email"
                    placeholder="请输入邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="微信"
                  class="InputWith"
                  prop="store_manager_wechat"
                >
                  <el-input
                    v-model="form.store_manager_wechat"
                    placeholder="请输入微信"
                  ></el-input>
                </el-form-item>
              </div>
              <span class="text">账户信息</span>
              <div class="divFlex">
                <el-form-item
                  label="开户行"
                  class="InputWith"
                  prop="account_bank"
                >
                  <el-input
                    v-model="form.account_bank"
                    placeholder="请输入开户行"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="银行卡号"
                  class="InputWith"
                  prop="account_card_no"
                >
                  <el-input
                    v-model="form.account_card_no"
                    placeholder="请输入银行卡号"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="divFlex">
                <el-form-item
                  label="户名"
                  class="InputWith"
                  prop="account_name"
                >
                  <el-input
                    v-model="form.account_name"
                    placeholder="请输入户名"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backtrack">返回</el-button>
        <el-button type="primary" v-if="form.id == ''" @click="addition"
          >确定添加</el-button
        >
        <el-button
          type="primary"
          v-if="form.id && !bianjiFlag"
          @click="addition1"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<script type="text/javascript"></script>

<script>
let marker, markerClusterer;
import { orderLat, genreList } from "../../../../utils/api";
import { compressImage } from "../../../../assets/js/compressImage";
import {
  uploadFiles,
  merchant,
  addMerchant,
  state,
  particulars,
} from "../../../../utils/api.js";
import { getSelectList, getRoleSelectList } from "../../../../utils/main";
export default {
  data() {
    return {
      selectList: [],
      options1: [],
      optionsRole: [],
      map: "",
      longitude: [],
      latitude: "",
      address: "",
      mapEl: [],
      input: "",
      adressList: [],
      addressStr: "",
      position: {
        longitude: 116.454413, //经度
        latitude: 39.931295, //纬度
        city: "",
      },
      center: "",
      // 以上是地图
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      innerVisible: false,
      formInline: {
        company_name: "",
        seller_type: "",
        store_manager_name: "",
        store_manager_phone: "",
        is_lock: "",
      },
      tableData: [],
      //收集数据
      form: {
        id: "",
        datumGens: [],
        account_by_seller: { telephone: "", password: "" },
        seller_type_data: "",
        company_name: "",
        shop_num: 1,
        logo: "",
        logo1: "",
        telephone: "",
        password: "",
        seller_type: "",
        divide: "",
        cooperation_expiration_date: "",
        paper_no: "",
        legal_person: "",
        legal_person_no_type: "",
        legal_person_no: "",
        set_up: "",
        registered_address: "",
        registered_capital: "",
        registered_capital_currency: "",
        operation_start: "",
        operation_end: "",
        hierarchical_organ: "",
        business_scope: "",
        paper_img: "",
        legal_person_img: "",
        legal_person_img1: "",
        legal_person_img22: "",
        legal_person_img2: "",
        charge_person_name: "",
        charge_person_phone: "",
        charge_person_wechat: "",
        charge_person_email: "",
        store_manager_name: "",
        store_manager_phone: "",
        store_manager_wechat: "",
        store_manager_email: "",
        account_bank: "",
        account_card_no: "",
        account_name: "",
        shop_phone: "",
        shop_name: "",
        seller_type_name: "",
      },
      //上传
      srcList2: {},
      fileList: [],
      fileType: ["png", "jpg", "jpeg"],
      fileLimit: 1,
      headers: { "Content-Type": "multipart/form-data" },
      //分页器
      total: 0,
      limit: 10,
      page: 1,
      id: "",
      imgHeader: this.Global.imgHeader,

      class_id: "",
      classArr: [],
      shopTypeOption: [
        {
          value: "1",
          label: "主材",
          children: [
            { value: "3", label: "地板" },
            { value: "4", label: "灯具" },
          ],
        },
        { value: "2", label: "辅材" },
      ],
      selectedOptions: [],
      // selectedOptions: "",
      isShow: true,
      casValue: [],
      value: [],
      shareScope: "-1",
      actForm: {},
      bianjiFlag: false,
      rules: {
        company_name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        "account_by_seller.telephone": [
          { required: true, message: "请输入账户手机号", trigger: "blur" },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        "account_by_seller.password": [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        seller_type: [
          { required: true, message: "请选择商家类型", trigger: "change" },
        ],
        divide: [
          { required: true, message: "请输入分成比例", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 100) {
                callback(new Error("不能大于100"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        cooperation_expiration_date: [
          { required: true, message: "请选择合作到期日期", trigger: "change" },
        ],
        role_id: [{ required: true, message: "请选择角色", trigger: "change" }],
        paper_no: [
          { required: true, message: "请输入营业执照注册号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^[A-Za-z0-9]+$/;
              if (!reg.test(value)) {
                callback(new Error("请输入由数字和26个英文字母组成的字符串"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        legal_person: [
          { required: true, message: "请输入法定代表人", trigger: "blur" },
        ],
        legal_person_no_type: [
          { required: true, message: "请选择法人证件类型", trigger: "change" },
        ],
        legal_person_no: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
        ],
        set_up: [
          { required: true, message: "请选择成立时间", trigger: "change" },
        ],
        registered_address: [
          { required: true, message: "请输入注册地址", trigger: "blur" },
        ],
        registered_capital: [
          { required: true, message: "请输入注册资本", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^(?!0+(?:\.0+)?$)(?:0|[1-9]\d*)(?:\.\d{1,2})?$/;
              if (!reg.test(value)) {
                callback(new Error("请输入大于0且不超过两位小数的数字"));
              }
              if (value > 99999999.99) {
                callback(new Error("不能大于99999999.99"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        registered_capital_currency: [
          { required: true, message: "请选择注册资本币", trigger: "change" },
        ],
        datumGens: [
          { required: true, message: "请选择营业期限", trigger: "change" },
        ],
        hierarchical_organ: [
          { required: true, message: "请输入登记机关", trigger: "blur" },
        ],
        business_scope: [
          { required: true, message: "请输入经营范围", trigger: "blur" },
        ],
        charge_person_name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],
        charge_person_phone: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        charge_person_email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              if (!reg.test(value)) {
                callback(new Error("请输入正确的邮箱格式"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        charge_person_wechat: [
          { required: true, message: "请输入微信", trigger: "blur" },
        ],
        shop_name: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
        ],
        shop_phone: [
          {
            required: true,
            message: "请输入店铺电话",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        store_manager_name: [
          { required: true, message: "请输入店铺负责人", trigger: "blur" },
        ],
        store_manager_phone: [
          {
            required: true,
            message: "请输入负责人电话",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[3456789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        store_manager_email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
              if (!reg.test(value)) {
                callback(new Error("请输入正确的邮箱格式"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        store_manager_wechat: [
          { required: true, message: "请输入微信", trigger: "blur" },
        ],
        account_bank: [
          { required: true, message: "请输入开户行", trigger: "blur" },
        ],
        account_card_no: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              var reg = /^[0-9]*$/;
              if (!reg.test(value)) {
                callback(new Error("银行卡号只能为数字"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        account_name: [
          { required: true, message: "请输入户名", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 获取角色列表
    async getSelect() {
      // this.loading = true;
      let res = await getRoleSelectList(this.token, 7)
        .then((res) => {
          // console.log(this.type, 88888);
          if (res.data.status) {
            this.optionsRole = res.data.data.data;
            // this.total = res.data.data.count;
            // console.log(111, this.options);
            // let timer = setTimeout(() => {
            //   this.loading = false;
            //   clearTimeout(timer);
            // }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              // this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    // 获取筛选条件列表
    async getSelectList() {
      // this.loading = true;
      let res = await getSelectList(this.token, this.category_id);
      if (res.data.status) {
        console.log(res.data.data.title_data);
        this.options1 = res.data.data.title_data || [];
        this.resUSer = res.data.data.brand_data;
        this.selectList = [];
        console.log(this.options1, "op[tions]");
        for (var i = 0; i < this.options1.length; i++) {
          this.selectList.push({ cate_id: "" });
          console.log(this.selectList, "mmm");
        }
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          // this.loading = false;
        }
      }
    },
    confirm() {
      this.innerVisible = false;
      console.log(this.position, "aaa");
      this.innerVisible = false;
    },
    getSortList() {
      genreList(this.token).then((res) => {
        if (res.data.status) {
          this.shopTypeOption = res.data.data;
          this.shopTypeOption = this.shopTypeOption.filter(function (item) {
            return item.id != 234;
          });
          // this.shopTypeOption.forEach((item) => {
          //   if (item.children) {
          //     item.children.forEach((i) => {
          //       if (i.children) {
          //         delete i.children;
          //       }
          //     });
          //   }
          // });
          console.log(this.shopTypeOption, "bbb");
        }
      });
    },
    selectChange() {
      // for (var i = 0; i < this.selectList.length; i++) {
      // //   console.log(this.options1);
      //   // this.selectList[i].cate_id = this.selectList[i].cate_id[0];
      // }
      console.log(this.selectList, "nnn");
    },
    shopTypehandleChange(e) {
      for (var i = 0; i < e.length; i++) {
        if (e[i][0] !== this.shareScope) {
          this.shareScope = e[i][0];
          break;
        }
      }
      const filterd = e.filter((v) => v[0] === this.shareScope);
      this.selectedOptions = [];
      this.selectedOptions.push(...filterd);

      console.log("e", e);
      console.log("form.seller_type", this.form.seller_type);
      console.log("this.selectedOptions", this.selectedOptions);
      this.class_id = "";
      this.classArr = [];
      this.selectedOptions.forEach((item) => {
        item.forEach((i) => {
          this.classArr.push(i);
        });
      });
      let uniqueArray = [...new Set(this.classArr)];
      this.class_id = uniqueArray.join(",");
      // this.category_id = this.selectedOptions;
      this.category_id = this.class_id;
      this.getSelectList();
      let uniqueStringArray = [];
      uniqueArray.forEach((item) => {
        uniqueStringArray.push(this.getElemet(this.shopTypeOption, item).name);
      });
      this.form.seller_type_name = uniqueStringArray.join(",");
      // console.log("uniqueStringArray", uniqueStringArray);
    },

    getElemet(list, iid) {
      for (let o of list || []) {
        if (o.id == iid) return o;
        const o_ = this.getElemet(o.children, iid);
        if (o_) return o_;
      }
    },
    // 地图
    setMap() {
      this.getAreaCode(this.position.latitude, this.position.longitude);
      // 防止重复绘制地图
      if (this.map) {
        return;
      }
      // 获取存放地图的容器
      this.mapEl = document.getElementById("mapEl");
      try {
        this.center = new TMap.LatLng(
          this.position.latitude,
          this.position.longitude
        );
        // 开始生成地图
        this.map = new TMap.Map(this.mapEl, {
          center: this.center,
          rotation: 0, //设置地图旋转角度
          pitch: 0, //设置俯仰角度（0~45）
          zoom: 15, //设置地图缩放级别
        });
      } catch (error) {
        console.error("error:", error);
      }

      // 地图点击时间

      this.map.on("click", (evt) => {
        if (evt.poi == null) return;
        if (marker) {
          marker.setMap(null);
          marker = null;
        }
        console.log(evt);
        const center = new TMap.LatLng(evt.latLng.lat, evt.latLng.lng);
        this.getAreaCode(evt.latLng.lat, evt.latLng.lng);

        marker = new TMap.MultiMarker({
          map: this.map, //指定地图容器
          styles: {
            // 点标记样式
            marker1: new TMap.MarkerStyle({
              width: 20, // 样式宽
              height: 30, // 样式高
              anchor: { x: 10, y: 30 }, // 描点位置
            }),
          },
          // 点标记数据数组
          geometries: [
            {
              id: "demo",
              styleId: "marker1", // 和上面styles里面的marker1 向对应
              position: center,
              properties: {
                title: "marker",
              },
            },
          ],
        });
        return;
        markerLayer.add({
          position: evt.latLng,
        });
      });
      marker = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        styles: {
          // 点标记样式
          marker1: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        // 点标记数据数组
        geometries: [
          {
            id: "demo",
            styleId: "marker1", // 和上面styles里面的marker1 向对应
            // position: new TMap.LatLng(this.latitude, this.longitude), // 标点的位置
            position: this.center,
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },
    changeMessage(e) {
      console.log("1", e);
      console.log("2", this.form.telephone);
      // this.$forceUpdate();
    },
    inputblur() {
      // this.adressList = []
      this.isShow = false;
    },
    focusadd() {
      if (this.input == "") {
        return;
      }
      // this.search()
      this.isShow = true;
    },
    search() {
      if (this.input == "") {
        this.isShow = false;
        return;
      }
      const suggest = new TMap.service.Suggestion({
        pageSize: 10, // 返回结果每页条目数
        regionFix: false, // 搜索无结果时是否固定在当前城市
        servicesk: "", // key
      });
      suggest
        .getSuggestions({
          keyword: this.input,
          servicesk: "", // 签名（可在腾讯地图开放平台中拿）
        })
        .then((result) => {
          console.log(result, "搜索");
          this.adressList = result.data;
          this.adressList.forEach((item) => {
            item.isChoose = false;
          });
          // console.log(result, "搜索2");
        });
    },
    //当我点击哪一个的时候改变背景色
    chooseAdress(data, index, event) {
      console.log(data, "选择的地址");
      this.chooseItem = data;

      // 取消之前选中的地址样式
      this.adressList.forEach((item, i) => {
        if (i !== index) {
          item.isChoose = false;
        }
      });
      // 设置当前选中的地址样式
      this.adressList[index].isChoose = true;
      this.$forceUpdate();
      this.reserMap(data.location.lat, data.location.lng, 15);
      this.position.latitude = data.location.lat;
      this.position.longitude = data.location.lng;
      this.input = data.title;
      this.isShow = false;
      this.getAreaCode(data.location.lat, data.location.lng);
      // this.adressList
    },
    //地图显示
    reserMap(lat, lng, zoom) {
      const center = new TMap.LatLng(lat, lng);
      const mapContainer = document.getElementById("mapEl");
      this.map.setCenter(new TMap.LatLng(lat, lng));
      if (marker) {
        marker.setMap(null);
        marker = null;
      }
      marker = new TMap.MultiMarker({
        map: this.map, //指定地图容器
        styles: {
          // 点标记样式
          marker1: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
          }),
        },
        // 点标记数据数组
        geometries: [
          {
            id: "demo",
            styleId: "marker1", // 和上面styles里面的marker1 向对应
            position: center,
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },

    getAreaCode(lat, lng) {
      let that = this;
      console.log(lat, lng);
      //这里可以直接this.$jsonp地址传入你的经纬度;
      that
        .$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
          location: `${lat},${lng}`, // 经纬度
          key: "RO3BZ-DM63Q-FEH5C-BM3OU-WKCL2-7TFL5", //这里就是要开启那个service不然会报错让你开启
          output: "jsonp", // output必须jsonp 不然会超时
        })
        .then((res) => {
          if (res.status === 0) {
            this.actForm = res.result;
            this.position.longitude = this.actForm.location.lng;
            this.position.latitude = this.actForm.location.lat;
            // this.actForm.areaCode = res.result.ad_info.adcode.substring(0,4) + '00'
            console.log(this.actForm, "=-=-=asdasd", this.position);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
          // this.$message.error("获取城市编码失败");
        });
    },
    //清空
    empty() {
      this.form = {
        id: "",
        datumGens: [],
        company_name: "",
        shop_num: 1,
        logo: "",
        logo1: "",
        account_by_seller: { telephone: "", password: "" },
        password: "",
        seller_type: "",
        divide: "",
        cooperation_expiration_date: "",
        paper_no: "",
        legal_person: "",
        legal_person_no_type: "",
        legal_person_no: "",
        set_up: "",
        registered_address: "",
        registered_capital: "",
        registered_capital_currency: "",
        operation_start: "",
        operation_end: "",
        hierarchical_organ: "",
        business_scope: "",
        paper_img: "",
        legal_person_img: "",
        legal_person_img1: "",
        legal_person_img22: "",
        legal_person_img2: "",
        charge_person_name: "",
        charge_person_phone: "",
        charge_person_wechat: "",
        charge_person_email: "",
        store_manager_name: "",
        store_manager_phone: "",
        store_manager_wechat: "",
        store_manager_email: "",
        account_bank: "",
        account_card_no: "",
        account_name: "",
        shop_phone: "",
        shop_name: "",
      };
      this.actForm = {};
    },
    //查询
    onSubmit() {
      this.page = 1;
      this.merchants();
    },
    //重置
    onReset() {
      console.log(this.selectedOptions, "asasas");
      this.formInline.company_name = "";
      this.formInline.seller_type = "";
      this.formInline.store_manager_name = "";
      this.formInline.store_manager_phone = "";
      this.formInline.is_lock = "";
      this.merchants();
    },
    //新增商家
    newly() {
      this.empty();
      this.selectedOptions = [];
      this.options1 = [];
      this.dialogVisible = true;
    },
    addrSearch() {
      this.setMap();
      this.reserMap(this.position.latitude, this.position.longitude);
      this.getAreaCode(this.position.latitude, this.position.longitude);
    },
    handleAddr() {
      this.innerVisible = true;
    },
    // 序号排序
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose(done) {
      this.bianjiFlag = false;
      this.empty();
      done();
      this.$refs["form"].resetFields();
    },
    //启用/停用
    consent(row) {
      state(this.token, row.id)
        .then((res) => {
          if (res.data.status) {
            this.merchants();
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              // this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    handopen() {
      for (let index = 0; index < this.$refs.form.$el.length; index++) {
        if (this.bianjiFlag) {
          this.$refs.form.$el[index].disabled = "true";
        } else {
          this.$refs.form.$el[index].disabled = "";
        }
      }
    },
    //详情
    handleEdit(row) {
      // this.loading = true;
      this.bianjiFlag = true;
      particulars(this.token, row.id)
        .then((res) => {
          if (res.data.status) {
            this.form = res.data.data;
            this.form.logo = this.imgHeader + this.form.logo;
            this.form.paper_img = this.imgHeader + this.form.paper_img;
            this.form.datumGens = [
              this.form.operation_start,
              this.form.operation_end,
            ];
            let img = this.form.legal_person_img.split(",");
            this.form.legal_person_img = this.imgHeader + img[0];
            this.form.legal_person_img2 = this.imgHeader + img[1];

            this.form.account_by_seller.password = "";
            // if (this.form.account_by_seller.telephone != null) {
            //   this.$nextTick(() => {
            //     // this.form.password = this.form.account_by_seller.password;
            //     this.form.telephone = this.form.account_by_seller.telephone;
            //   });
            // } else {
            //   this.form.telephone = "";
            // }

            // this.selectedOptions = this.form.seller_type;
            this.selectedOptions = JSON.parse(this.form.seller_type_data);
            let cate_ids = JSON.parse(this.form.cate_ids);
            console.log("cate_ids", cate_ids);
            this.shopTypehandleChange(this.selectedOptions);
            let timer = setTimeout(() => {
              console.log("ppp", this.options1);
              this.options1.forEach((item, index) => {
                this.selectList[index].cate_id = cate_ids[index].cate_id;
              });
              clearTimeout(timer);
            }, 500);
            this.position.latitude = this.form.latitude;
            this.position.longitude = this.form.longitude;
            this.dialogVisible = true;
            // let timer = setTimeout(() => {
            //   this.loading = false;
            //   clearTimeout(timer);
            // }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              // this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    handleEdit1(row) {
      if (row.account_by_seller.status == 1) {
        this.$message.warning("启用时不能编辑");
        return;
      }
      // this.loading = true;
      particulars(this.token, row.id)
        .then((res) => {
          if (res.data.status) {
            this.form = res.data.data;
            this.form.logo1 = this.form.logo;
            this.form.logo = this.imgHeader + this.form.logo;
            this.form.paper_img1 = this.form.paper_img;
            this.form.paper_img = this.imgHeader + this.form.paper_img;
            this.form.datumGens = [
              this.form.operation_start,
              this.form.operation_end,
            ];
            let img = this.form.legal_person_img.split(",");
            this.form.legal_person_img1 = this.form.legal_person_img;
            this.form.legal_person_img = this.imgHeader + img[0];
            this.form.legal_person_img2 = this.imgHeader + img[1];
            this.form.legal_person_img22 = img[1];

            this.form.account_by_seller.password = "";
            // if (this.form.account_by_seller.telephone != null) {
            //   this.$nextTick(() => {
            //     // this.form.password = this.form.account_by_seller.password;
            //     this.form.telephone = this.form.account_by_seller.telephone;
            //   });
            // } else {
            //   this.form.telephone = "";
            // }

            // this.form.telephone = this.form.account_by_seller.telephone;
            this.form.role_id = Number(this.form.account_by_seller.role_id);
            // this.$nextTick(() => {
            //   // this.form.password = this.form.account_by_seller.password;
            //   this.form.seller_name = this.form.account_by_seller.seller_name;
            //   this.form.role_id = Number(this.form.account_by_seller.role_id);
            // });

            this.selectedOptions = JSON.parse(this.form.seller_type_data);
            let cate_ids = JSON.parse(this.form.cate_ids);
            console.log("cate_ids", cate_ids);
            this.shopTypehandleChange(this.selectedOptions);
            let timer = setTimeout(() => {
              console.log("ppp", this.options1);
              this.options1.forEach((item, index) => {
                this.selectList[index].cate_id = cate_ids[index].cate_id;
              });
              clearTimeout(timer);
            }, 500);
            console.log("this.selectList", this.selectList);
            // this.selectedOptions = [
            //   [35, 36, 43],
            //   [35, 36, 45],
            // ];
            this.position.latitude = this.form.latitude;
            this.position.longitude = this.form.longitude;
            this.getAreaCode(this.position.latitude, this.position.longitude);
            this.dialogVisible = true;
            // let timer = setTimeout(() => {
            //   this.loading = false;
            //   clearTimeout(timer);
            // }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              // this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //返回
    backtrack() {
      this.empty();
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },
    //分店管理
    // subbranch(row) {
    //   this.$router.push({ name: "分店管理", params: { id: row.id } });
    // },
    //添加
    addition() {
      // console.log(this.selectList, "ppp");
      this.addMerchants();
    },
    addition1() {
      let selectListJson = [];
      for (let index = 0; index < this.selectList.length; index++) {
        console.log();
        if (this.selectList[index].cate_id) {
          selectListJson.push({ cate_id: "" });
          if (this.selectList[index].cate_id[0]) {
            selectListJson[index].cate_id = this.selectList[index].cate_id[0];
          } else {
            selectListJson[index].cate_id = this.selectList[index].cate_id;
          }

          // this.selectList[index].cate_id = this.selectList[index].cate_id;
        }
      }

      console.log("selectListJson", selectListJson);
      this.form.operation_start = this.form.datumGens[0];
      this.form.operation_end = this.form.datumGens[1];

      this.$refs["form"].validate((valid) => {
        if (valid) {
          addMerchant(
            2,
            this.token,
            this.form.role_id,
            this.form.shop_num,
            this.form.company_name,
            this.form.logo1,
            this.form.account_by_seller.telephone,
            this.form.account_by_seller.password,
            this.class_id,
            JSON.stringify(this.selectedOptions),
            this.form.divide,
            this.form.cooperation_expiration_date,
            this.form.paper_no,
            this.form.legal_person,
            this.form.legal_person_no_type,
            this.form.legal_person_no,
            this.form.set_up,
            this.form.registered_address,
            this.form.registered_capital,
            this.form.registered_capital_currency,
            this.form.operation_start,
            this.form.operation_end,
            this.form.hierarchical_organ,
            this.form.business_scope,
            this.form.paper_img1,
            this.form.legal_person_img1,
            this.form.charge_person_name,
            this.form.charge_person_phone,
            this.form.charge_person_wechat,
            this.form.charge_person_email,
            this.form.store_manager_name,
            this.form.store_manager_phone,
            this.form.store_manager_wechat,
            this.form.store_manager_email,
            this.form.account_bank,
            this.form.account_card_no,
            this.form.account_name,
            this.actForm.formatted_addresses.recommend,
            this.position.longitude,
            this.position.latitude,
            this.form.shop_phone,
            this.form.shop_name,
            // JSON.stringify(this.selectList),
            JSON.stringify(selectListJson),
            this.actForm.ad_info.adcode.substring(0, 2) + "0000",
            this.actForm.ad_info.adcode.substring(0, 4) + "00",
            this.actForm.ad_info.adcode,
            this.form.id,
            this.form.seller_type_name
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.merchants();
              this.dialogVisible = false;
              this.empty();
              this.$refs["form"].resetFields();
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/login");
                let timer = setTimeout(() => {
                  this.$message.error("错误，请刷新");
                }, 5000);
              }
              this.$message.error(res.data.msg);
              // this.merchants();
              // this.dialogVisible = false;
              // this.empty();
            }
          });
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.merchants();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.merchants();
    },
    handleRemove() {},
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
      return;
    },
    //上传文件的格式
    beforeUpload(file) {
      if (file.type != "" || file.type != null || file.type != undefined) {
        //截取文件的后缀，判断文件类型
        const FileExt = file.name.replace(/.+\./, "").toLowerCase();
        //计算文件的大小
        const isLt5M = file.size / 1024 / 1024 < 1; //这里做文件大小限制
        //如果大于50M
        if (!isLt5M) {
          this.$message.error("上传文件大小不能超过 1MB!");
          return false;
        }
        //如果文件类型不在允许上传的范围内
        if (this.fileType.includes(FileExt)) {
          return true;
        } else {
          this.$message.error("上传文件格式不正确!");
          return false;
        }
      }
    },
    //这是我自定义的移除事件
    handleClosedelete(i) {
      this.fileList.splice(i, 1); //删除上传的文件
    },
    // 压缩文件
    async compressFile(singleFile) {
      let config = {
        quality: 0.5, //默认0.5  0-1
        // width:100,
        // height:100
      };
      let result = await compressImage({
        file: singleFile.raw,
        config,
        fileName: singleFile.name,
      });
      this.srcList2 = result.finalFile;
      console.log("bbb", this.srcList2);
      // console.log("压缩后图片1===>", this.imageList);
    },
    //上传公司图片的事件
    async uploadFiles(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          this.form.logo1 = res.data.data.saveurl;
          this.form.logo = res.data.data.weburl;
          // this.imgShowList.push(res.data.data.saveurl);
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.logo1 = res.data.data.saveurl;
      //     this.form.logo = res.data.data.weburl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    //上传营业执照的事件
    async license(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          // this.imgShowList.push(res.data.data.saveurl);
          this.form.paper_img1 = res.data.data.saveurl;
          this.form.paper_img = res.data.data.weburl;
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.paper_img1 = res.data.data.saveurl;
      //     this.form.paper_img = res.data.data.weburl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    //上传身份证正面事件
    async front(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          // this.imgShowList.push(res.data.data.saveurl);
          this.form.legal_person_img1 = res.data.data.saveurl;
          this.form.legal_person_img = res.data.data.weburl;
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.legal_person_img1 = res.data.data.saveurl;
      //     this.form.legal_person_img = res.data.data.weburl;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    async reverse(item) {
      this.$message("文件上传中........");
      let singleFile = {};
      singleFile.raw = item.file;
      singleFile.name = item.file.name;
      singleFile.size = item.file.size;
      singleFile.uid = item.file.uid;
      await this.compressFile(singleFile);
      console.log("srcList2", this.srcList2);
      uploadFiles(this.srcList2).then((res) => {
        if (res.data.status != false || res.data.id != null) {
          res.data.data.saveurl; //半截
          res.data.data.weburl; //全拼
          // this.imgShowList.push(res.data.data.saveurl);
          this.form.legal_person_img22 = res.data.data.saveurl;
          this.form.legal_person_img2 = res.data.data.weburl;
          this.form.legal_person_img1 =
            this.form.legal_person_img1 + "," + this.form.legal_person_img22;
          // this.fileList.push(this.srcList2); //成功过后手动将文件添加到展示列表里
          // let i = this.fileList.indexOf(this.srcList2);
          this.handleSuccess();
        }
      });
      //上传文件的需要formdata类型;所以要转
      // uploadFiles(item.file).then((res) => {
      //   if (res.data.status != false || res.data.id != null) {
      //     res.data.data.saveurl; //半截
      //     res.data.data.weburl; //全拼
      //     this.form.legal_person_img22 = res.data.data.saveurl;
      //     this.form.legal_person_img2 = res.data.data.weburl;
      //     this.form.legal_person_img1 =
      //       this.form.legal_person_img1 + "," + this.form.legal_person_img22;
      //     this.fileList.push(item.file); //成功过后手动将文件添加到展示列表里
      //     let i = this.fileList.indexOf(item.file);
      //     this.handleSuccess();
      //   }
      // });
    },
    //上传成功后的回调
    handleSuccess() {
      this.$message({
        message: "上传成功",
        type: "success",
      });
      this.handleClosedelete();
    },
    //开始日期
    initiation() {
      this.form.operation_start = this.form.datumGens[0];
      this.form.operation_end = this.form.datumGens[1];
      console.log(this.form.operation_start, this.form.operation_end);
    },
    //商家列表
    merchants() {
      this.loading = true;
      merchant(
        this.token,
        this.formInline.company_name,
        this.formInline.seller_type,
        this.formInline.store_manager_name,
        this.formInline.store_manager_phone,
        this.formInline.is_lock,
        this.id,
        this.limit,
        this.page
      )
        .then((res) => {
          if (res.data.status) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.total;

            this.tableData.forEach((item) => {
              if (item.logo) {
                item.logo1 = item.logo;
                item.logo = this.imgHeader + item.logo;
              }
            });
            // this.tableData.forEach((item) => {
            //   if (item.seller_type == 1) {
            //     item.seller_type_text = "主材";
            //   }
            //   if (item.seller_type == 2) {
            //     item.seller_type_text = "辅材";
            //   }
            // });
            this.tableData.forEach((item) => {
              if (item.account_by_seller != null) {
                if (item.account_by_seller.status == 1) {
                  item.is_lock_text = "启用";
                }
                if (item.account_by_seller.status == 0) {
                  item.is_lock_text = "停用";
                }
              }
            });
            let timer = setTimeout(() => {
              this.loading = false;
              clearTimeout(timer);
            }, 400);
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            if (res.data.msg == "此账号没有权限") {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
            let timer = setTimeout(() => {
              this.$message.error(res.data.msg);
            }, 1000);
          }
        })
        .catch((err) => {
          console.log(err.message);
        });
    },
    //添加商品
    addMerchants() {
      console.log(this.form);
      let selectListJson = [];
      for (let index = 0; index < this.selectList.length; index++) {
        console.log();
        if (this.selectList[index].cate_id) {
          selectListJson.push({ cate_id: "" });
          selectListJson[index].cate_id = this.selectList[index].cate_id[0];
          this.selectList[index].cate_id = this.selectList[index].cate_id[0];
        }
      }
      this.form.operation_start = this.form.datumGens[0];
      this.form.operation_end = this.form.datumGens[1];
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addMerchant(
            1,
            this.token,
            this.form.role_id,
            this.form.shop_num,
            this.form.company_name,
            this.form.logo1,
            this.form.account_by_seller.telephone,
            this.form.account_by_seller.password,
            this.class_id,
            JSON.stringify(this.selectedOptions),
            this.form.divide,
            this.form.cooperation_expiration_date,
            this.form.paper_no,
            this.form.legal_person,
            this.form.legal_person_no_type,
            this.form.legal_person_no,
            this.form.set_up,
            this.form.registered_address,
            this.form.registered_capital,
            this.form.registered_capital_currency,
            this.form.operation_start,
            this.form.operation_end,
            this.form.hierarchical_organ,
            this.form.business_scope,
            this.form.paper_img1,
            this.form.legal_person_img1,
            this.form.charge_person_name,
            this.form.charge_person_phone,
            this.form.charge_person_wechat,
            this.form.charge_person_email,
            this.form.store_manager_name,
            this.form.store_manager_phone,
            this.form.store_manager_wechat,
            this.form.store_manager_email,
            this.form.account_bank,
            this.form.account_card_no,
            this.form.account_name,
            this.actForm.formatted_addresses.recommend,
            this.position.longitude,
            this.position.latitude,
            this.form.shop_phone,
            this.form.shop_name,
            // JSON.stringify(this.selectList),
            JSON.stringify(selectListJson),
            this.actForm.ad_info.adcode.substring(0, 2) + "0000",
            this.actForm.ad_info.adcode.substring(0, 4) + "00",
            this.actForm.ad_info.adcode,
            "",
            this.form.seller_type_name
          ).then((res) => {
            if (res.data.status) {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.merchants();
              this.dialogVisible = false;
              this.empty();
              this.$refs["form"].resetFields();
            } else {
              if (res.data.msg == "token失效,请重新进行登录") {
                this.$router.push("/login");
                let timer = setTimeout(() => {
                  this.$message.error("错误，请刷新");
                }, 5000);
              }
              this.$message.error(res.data.msg);
              // this.merchants();
              // this.dialogVisible = false;
              // this.empty();
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  mounted() {
    this.merchants();
    this.getSortList();
    this.getSelect();
    // console.log(this.position);
    // 1，初始化腾讯地图
    this.geolocation = new qq.maps.Geolocation(
      "4TSBZ-LNLKT-W2QX4-LYQ7H-C7O37-BFFDA",
      "taoBaiJie"
    );
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.modality {
  display: flex;
  width: 100%;
}

.modality .leftImg {
  width: 20%;
}

.modalityUser {
  display: flex;
  flex-direction: column;
  margin: 0 15px;
  width: 70%;
}

.modalityUser .item {
  display: block;
  text-align: left;
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aboutDialog >>> .el-dialog__body {
  color: #606266;
  font-size: 20px;
  word-break: break-all;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.InputWith {
  margin-left: 15px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
.box-card {
  width: 100%;
}

.demo-form-inline {
  display: flex;
}

.margBott {
  margin-bottom: 20px;
}

.gauge {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.oneLine {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.divFlex {
  display: flex;
}

.divFlex .el-form-item {
  width: 45%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.formUser {
  width: 60%;
}

#container {
  width: 100%;
  height: 100%;
}

.addressSearch {
  display: flex;
}

.addressSearch button {
  height: 40px;
  width: 80px;
  margin-left: 10px;
  font-size: 16px;
}

.left {
  position: relative;
}

.left .adressBox {
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  z-index: 9999;
  width: 100%;
}

.address-item {
  padding: 5px 0;
  cursor: pointer;
}

.address-item:hover {
  background-color: #ecf0f1;
}

.checked {
  color: #409eff;
}
.first-no-check-cascader
  .el-cascader-panel
  .el-cascader-menu:first-child
  .el-cascader-node
  .el-checkbox {
  display: none !important;
}
</style>